<template>
	<!-- 导航条 -->
	<div id="root">
		<div class="nav">
			<img src="/imgs/home/logo.png" class="nav-img">

			<ul id="nav-center"> 
				<router-link
					v-for="(n,i) in navItem"
					:key="i"
					:to="n.link"
				>{{n.title}}</router-link>
				<router-link to='/home' v-if="appExist">APP下载</router-link>
				<router-link to='/help' v-if="appExist">在线帮助</router-link>
			</ul>

			<div id="nav-third" v-if="exist">	
				<span>下载APP</span>
				<ul class="nav-list">
					<li>注册</li>
					<li>|</li>
					<li>登录</li>
				</ul>
			</div>
			<!-- <Button style="color:white;">十多个点发货电饭锅</Button> -->
		</div>
	</div>
</template>

<script>
export default {
	props: {
		exist:{
			default:true,
		},
		appExist:{
			default:false,
		}
	},
	data(){
		return {
			navItem:[
				{
					title:'首页',
					link:'/home'
				},
				{
					title:'VIP课程',
					link:'/vip'
				},
				{
					title:'直播课堂',
					link:'/liveroom'
				},
				{
					title:'资讯文章',
					link:'/articles'
				},
				{
					title:'证书申请',
					link:'/certificate'
				},
				{
					title:'求职通道',
					link:'/jobhuntingchannel'
				},
				{
					title:'我的课程',
					link:'/mine'
				},
				{
					title:'关于我们',
					link:'/about'
				}
			],
		}
	},
}
</script>

<style scoped>
/* 导航条 */
#root{
	width: 100%;
}
.nav{
	width: 1400px;
	height: 84px;
	margin:0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fefefe;
}
img{
	width: 145px;
	height: 39px;
}
#nav-center{
	width: 700px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#nav-center a{
	height: 100%;
	display: flex;
	align-items: center;
	color: #fefefe;
	text-decoration: none;
    font-family:X; 
}
#nav-center:first-child{
	font-family: MEDIUM;
	font-weight: bold;
}
#nav-third{
	display: flex;
	align-items: center;
}
.nav-list{
	display: flex;
	margin-left: 55px;
}
.nav-list li{
	padding: 10px 10px;
}
</style>
